import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      // 重定向
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      // 当用户访问与该路由规则匹配的 URL 时（在这段配置里是/home 路径 ），Vue Router 会找到HomeView 组件，并把它渲染到应用中<router - view> 标签所在的位置。
      component: HomeView,
      redirect: '/home/setup',
      children: [
        {
          // 子路由不加/
          path: 'setup',
          name: 'setup',
          component: () => import("@/components/CompostionAPI/01setup.vue")
        }, {
          // 子路由不加/
          path: 'ref',
          name: 'ref',
          component: () => import("@/components/CompostionAPI/02ref.vue")
        }, {
          // 子路由不加/
          path: 'reactive',
          name: 'reacitve',
          component: () => import("@/components/CompostionAPI/03reactive.vue")
        }, {
          // 子路由不加/
          path: 'refandreactive',
          name: 'refandreacitve',
          component: () => import("@/components/CompostionAPI/04ref和reactive的区别.vue")
        }, {
          // 子路由不加/
          path: 'computed',
          name: 'computed',
          component: () => import("@/components/CompostionAPI/05computed.vue")
        }, {
          // 子路由不加/
          path: 'watch',
          name: 'watch',
          component: () => import("@/components/CompostionAPI/06watch.vue")
        }, {
          // 子路由不加/
          path: 'lifecycle',
          name: 'lifecycle',
          component: () => import("@/components/CompostionAPI/07生命周期.vue")
        }, {
          // 子路由不加/
          path: 'father',
          name: 'father',
          component: () => import("@/components/CompostionAPI/08父子传参/index.vue")
        }, {
          // 子路由不加/
          path: 'refdom',
          name: 'refdom',
          component: () => import("@/components/CompostionAPI/09ref获取dom.vue")
        }, {
          // 子路由不加/
          path: 'toRefs',
          name: 'toRefs',
          component: () => import("@/components/CompostionAPI/10toRefs.vue")
        }, {
          // 子路由不加/
          path: 'hook',
          name: 'hook',
          component: () => import("@/components/CompostionAPI/11hook/index.vue")
        }
      ]
    },
    {
      path: '/other',
      name: '/other',
      component: HomeView,
      children: [
        {
          path: 'shallow',
          name: 'shallow',
          component: () => import('@/components/compositionOther/01shallowRef和shallowReactive.vue')
        }, {
          path: 'readonly',
          name: 'readonly',
          component: () => import('@/components/compositionOther/02readonly和shallowReadonly.vue')
        }, {
          path: 'raw',
          name: 'raw',
          component: () => import('@/components/compositionOther/03toRaw和markRaw.vue')
        }, {
          path: 'toRef',
          name: 'toRef',
          component: () => import('@/components/compositionOther/04toRef.vue')
        }, {
          path: 'customRef',
          name: 'customRef',
          component: () => import('@/components/compositionOther/05customRef.vue')
        }, {
          path: 'judg',
          name: 'judg',
          component: () => import('@/components/compositionOther/06响应式的判断.vue')
        }, {
          path: 'provideandinject',
          name: 'provideandinject',
          component: () => import('@/components/compositionOther/07provide和inject/index.vue')
        }, {
          path: 'pinia',
          name: 'pinia',
          component: () => import('@/components/compositionOther/08pinia.vue')
        }, {
          path: 'fragment',
          name: 'fragment',
          component: () => import('@/components/compositionOther/09Fragment.vue')
        }, {
          path: 'teleport',
          name: 'teleport',
          component: () => import('@/components/compositionOther/10Teleport.vue')
        }, {
          path: 'jump',
          name: 'jump',
          component: () => import('@/components/compositionOther/11路由跳转.vue')
        }
      ]
    }
  ],
})

export default router
